<template>
  <el-tag
    :type="tagType"
    size="small"
    :class="tagClass"
  >
    {{ statusText }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  status: string
  size?: 'small' | 'medium' | 'large'
}

const props = withDefaults(defineProps<Props>(), {
  size: 'small'
})

// 根据状态映射不同的标签类型
const tagType = computed(() => {
  switch (props.status.toLowerCase()) {
    case 'approved':
      return 'success'
    case 'implemented':
      return 'primary'
    case 'pending':
      return 'warning'
    case 'rejected':
      return 'danger'
    default:
      return 'info'
  }
})

// 根据状态显示不同的文本
const statusText = computed(() => {
  switch (props.status.toLowerCase()) {
    case 'approved':
      return '已批准'
    case 'implemented':
      return '已实现'
    case 'pending':
      return '待处理'
    case 'rejected':
      return '已拒绝'
    default:
      return '未知状态'
  }
})

// 标签类名
const tagClass = computed(() => {
  return `requirement-status-tag ${props.status.toLowerCase()}`
})
</script>

<style scoped>
.requirement-status-tag {
  cursor: default;
}
</style>